<template>
	<view v-if="enable">
		<view class="headerContainer">
			系统消息
		</view>
		<view style="height: 200rpx;">
			
		</view>
		<u-empty v-if="pageObj.list.length==0" style="margin-top: 100rpx;" text="暂无记录" mode="history">
		</u-empty>
		
		<view v-for="(item, index) in pageObj.list" class="itemMessageContainer" @click="onReadMessage(item)">
			<view class="headerWrapper">
				<view v-if="item.type=='customer_add'" class="left">
					<image  class="iconWrapper" src="@/static/image/icon_message_user.png" mode=""></image>	
					新增顾客
				</view>			
				<view v-else-if="item.type=='customer_reserve_result'" class="left">
					<image  class="iconWrapper" src="@/static/image/icon_message_yuyue.png" mode=""></image>	
					预约消息
				</view>
				<view v-else-if="item.type=='VR'" class="left">
					<image  class="iconWrapper" src="@/static/image/icon_message_vr.png" mode=""></image>	
					VR带看
				</view>

				<view v-else class="left">
					<image  class="iconWrapper" src="@/static/image/icon_message_system.png" mode=""></image>	
					系统消息
				</view>
				
				<view class="right">				
					{{item.createTime}}
				</view>
			</view>
			<view class="titleWrapper">
				{{item.title}}
			</view>
			<view class="content">
				{{item.content}}
			</view>
			<view v-if="item.type=='customer_reserve_result'"  class="detail">
				查看详情
				<view class="right">
					<text v-if="!item.readStatus" style="color: #f00;" >未读</text>
					<image class="icon" src="../../../static/image/btn_back22.png" mode=""></image>
				</view>
			</view>

			<view v-else-if="item.type=='VR'"  class="detail">
				打开微信小程序
				<view class="right">
					<text v-if="!item.readStatus" style="color: #f00;" >未读</text>
					<image class="icon" src="../../../static/image/btn_back22.png" mode=""></image>
				</view>
			</view>

			<view v-else-if="!item.readStatus" class="detail" >
					查看详情
					<view class="right">
						<text v-if="!item.readStatus" style="color: #f00;" >未读</text>
						<image class="icon" src="../../../static/image/btn_back22.png" mode=""></image>
					</view>
					
			</view>


		</view>
		<view class="" style="height: 50rpx;">
			
		</view>
	</view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null

    let refreshTimer = null
	export default {
		data() {
			return {
				pageObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
				},
				unreadMessageNum: -1,
			};
		},
        props: {
			enable: {
        		type: Boolean,
        		default: false,
        	},
        	onShow: {
        		type: Boolean,
        		default: false,
        	},
        },
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        watch: {
        	onShow: {
        		handler: function observer(val) {
        			if (val) {
						this.getSystemMessageUnreadNum(false)
						this.clearListShow(this.pageObj)
        				this.getSystemMessage()
        			}
        		},
        		immediate: true,
				deep: true
        	},
        },
        mounted() {
        	that = this;
			that.getSystemMessageUnreadNum()
			refreshTimer = setInterval(()=>{
				that.getSystemMessageUnreadNum(true)
			}, 60000)
		},
		unmounted() {
			clearInterval(refreshTimer)
		},
        methods:{ 
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),
            onReachBottomRefresh(){
				let that = this
            	console.log("onReachBottomRefresh")
            	that.getSystemMessage()
            },
			
			getSystemMessageUnreadNum(refreshList){
				api.getSystemMessageUnreadNum({
					param: {
					}
				}).then(res => {
					// console.log("getSystemMessageUnreadNum：",res)
					if (res.success) {
						if (that.unreadMessageNum != res.data){
							that.unreadMessageNum = res.data
							that.$emit("onUnreadNum", that.unreadMessageNum)
							if (that.onShow&&refreshList){
								that.clearListShow(this.pageObj)
								that.getSystemMessage()
							}
						}					
					}
				})
			},
            getSystemMessage() {
				let that = this
            	if (that.pageObj.curPageIndex != that.pageObj.pageIndex) {
            		that.pageObj.curPageIndex = that.pageObj.pageIndex
            		api.getSystemMessagePage({
            			param: {
            				limit: 10,
            				page: that.pageObj.pageIndex,
            			}
            		}).then(res => {
            			console.log("getSystemMessagePage：",res)
            			if (res.code == 0) {
            				that.pushListShow(that.pageObj, res.data)
            			}
            		})
            	}
            
            },
            onReadMessage(item){
				if (!item.readStatus){
					api.setSystemMessageRead({
						param: {
							ids: [item.id],
						}
					}).then(res => {
						console.log("getSystemMessageRead", res)
						if (res.success) {
							item.readStatus = true
							this.getSystemMessageUnreadNum(false)	
						}
					})
										
				}
				if (item.type=='customer_reserve_result'){
					uni.navigateTo({
						url: "/pages/shop/message/index?item="+encodeURIComponent(JSON.stringify(item)),
					});
				}
				if (item.type=='VR'){
					this.openMiniProgram({
						path: item.path
					})
				}
			},
            
            /**
             * @description: 列表中添加数据
             * @param {number} id   u-tabs-swiper的当前ID
             * @param {list}  列表
             * @return void
             */
            pushListShow(srcObj, pushlist) {
            	if (pushlist && pushlist.length > 0) {
            		for (let i = 0; i < pushlist.length; i++) {
            			// pushlist[i].createTime = utils.formatTime(pushlist[i].createTime, 'yyyy-MM-dd')
            			srcObj.list.push(pushlist[i])
            		}
            		srcObj.pageIndex++;
            
            		if (pushlist.length == 10) {
            			srcObj.loadStatus = "loadmore"
            		} else {
            			srcObj.loadStatus = "nomore"
            		}
            	} else {
            		srcObj.loadStatus = "nomore"
            	}
            },
            
            //----清空列表
            clearListShow(srcObj) {
            	srcObj.curPageIndex = 0;
            	srcObj.pageIndex = 1;
            	srcObj.list.splice(0, srcObj.list.length)
            },

			openMiniProgram(obj) {
				console.log("openMiniProgram",obj)
				if (obj&&obj.path&&obj.path.length > 0) {
					plus.share.getServices(
						res => {
							let sweixin = null;
							for (let i in res) {
								if (res[i].id == 'weixin') {
									sweixin = res[i];
								}
							}
							//唤醒微信小程序
							if (sweixin) {
								console.log("openMiniProgram",obj.path)
								sweixin.launchMiniProgram({
									id: that.shopInfo.wechatAppOriginId, //
									type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
									path: obj.path //'/pages/home/home'
								});
							}
						}
					);
				}
				
			},
        }
	}
</script>

<style lang="scss" scoped>
.headerContainer{
	height: 200rpx;
	width: 100vw;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url(@/pages/shop/static/image/home_bg.jpg);
	border-bottom: 1px solid #f3f3f3;
	line-height: 200rpx;
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	background-color: #fff;
	color: #fff;
	text-align: center;
	z-index: 88;
}
.itemMessageContainer {
	width: 714rpx;
	background-color: #ffffff;
	padding: 30rpx 30rpx;
	border-radius: 20rpx;
	margin-left: 18rpx;
	margin-top: 20rpx;
	.headerWrapper{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0 20rpx 0;		
		border-bottom: 1px solid #f3f3f3;
		.left{
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #222;
			.iconWrapper{
				width: 35rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}
		}
		.right{
			color: #888;
			font-size: 24rpx;
		}
	}
	.titleWrapper{
		padding: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #222;
	}
	.content{
		padding: 0 30rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 40rpx;
	}
	.detail{
		padding: 20rpx 0 10rpx 30rpx;

		font-size: 24rpx;
		color: #666;
		border-top: 1px solid #f3f3f3;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.right{
			display: flex;
			align-items: center;
			.icon{
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
		
	}
}
</style>
